import React, { Component } from "react";
import * as echarts from "echarts";
import Pie from "@/components/Pie";
import url from "@/config/url";
import axios from "@/http/http";

class Welcome extends Component {
  state = {
    accessFrom: [],
    area: [],
    gender: [],
  };
  render() {
    const { accessFrom, area, gender } = this.state;
    return (
      <div id="main" style={{ display: "flex" }}>
        <Pie
          id="pie1"
          data={accessFrom}
          text="搜索使用分布"
          legend={false}
          title="搜索引擎"
        ></Pie>
        <Pie
          id="pie2"
          data={area}
          text="地域分布"
          legend={true}
          title="地域"
        ></Pie>
        <Pie
          id="pie3"
          data={gender}
          text="性别占比"
          legend={true}
          title="性别"
        ></Pie>
      </div>
    );
  }
  componentDidMount() {
    // 请求饼图数据
    axios
      .get(url.getpiedata)
      .then((res) => {
        console.log(res);
        this.setState({
          accessFrom: res.data.data.accessFrom,
          area: res.data.data.area,
          gender: res.data.data.gender,
        });
      })
      .catch((e) => {});
  }
}

export default Welcome;
